<template>
	<view>
		<swiper>
			<swiper-item>
				<view class="swiper-item">
					<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1.1-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/fangtu.png"
					 mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1.1-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/fangtu.png"
					 mode="widthFix"></image>
				</view>

			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1.1-%E4%BA%A7%E5%93%81%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/fangtu.png"
					 mode="widthFix"></image>
				</view>

			</swiper-item>
		</swiper>
		<view class="num-position">
			1/3
		</view>
		<view class="chanpin-box">
			<view class="goods-name">
				华为荣耀Note10 8GB+128GB 幻夜黑 全网通版智能手机
			</view>
			<view class="goods-xijie">
				<view class="goods-newjifen">
					200 积分
				</view>
				<view class="goods-yuanjifen">266积分</view>
				<view class="goods-haoping">好评 1%</view>
				<view class="goods-xiaoliang">销量 175</view>
				<image src="http://ai.ylcaifu.com/appimg/images/1.0-%E5%8F%91%E7%8E%B0/1.5.1.1-%E5%88%86%E7%B1%BB%E8%BF%9B%E5%85%A5/android/drawable-xhdpi/bukejian.png"
				 mode="widthFix" class="is-kejian"></image>
			</view>
			<view class="xuanze">
				<view class="">
					选择
				</view>
				<view class="xuanze-right">
					<view>
						选择机身颜色-网络类型-存储容量
					</view>
					<view class="iconfont icon">
						&#xe640;
					</view>
				</view>
			</view>
			<view class="canshu">
				<view class="">
					参数
				</view>
				<view class="canshu-right">
					<view>
						尺寸-颜色
					</view>
					<view class="iconfont icon">
						&#xe640;
					</view>
				</view>
			</view>
		</view>
		<view class="chanpin-xiangqing">
			<view class="chanpin-xiangqing-title">
				产品详情
			</view>
			<view class="xiangqing-box">
				产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情
				产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情产品详情
				产品详情产品详情产品详情产品详情
			</view>
		</view>
		<view class="btn-group">
			<view class="btn1">加入购物车</view>
			<view class="btn2" @click="toJiesuan">立即兑换</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},methods:{
			toJiesuan(){
				uni.navigateTo({
					url: './jiesuan/jiesuan',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
			
		}
	}
</script>

<style>
	page {
		background: rgb(255, 255, 255)
	}

	swiper,
	swiper-item,
	swiper-item image {
		width: 100%;
		height: 750upx;
	}

	.chanpin-box {
		padding: 30upx;
	}

	.goods-name {
		font-size: 15px;
		padding-right: 30upx;
		font-weight: bold;
	}

	.goods-newjifen {
		font-size: 18px;
		font-weight: bold;
		color: rgba(255, 86, 1, 1);
		line-height: 19px;
	}

	.goods-yuanjifen {
		font-size: 12px;
		color: rgba(153, 153, 153, 1);
		text-decoration: line-through;
	}

	.goods-xijie {
		display: flex;
		flex-direction: row;
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		align-items: center;
		height: 45px;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
	}

	.goods-xijie view {
		margin-right: 10px;
	}

	.is-kejian {
		height: 10px;
		width: 12px;
	}

	.xuanze,
	.canshu {
		height: 39px;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 15px;
	}

	.xuanze-right,
	.canshu-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		margin-left: 22upx;
		font-size: 12px;

		color: rgba(153, 153, 153, 1);
	}
	.chanpin-xiangqing{
		margin-bottom: 50px;
	}
	.chanpin-xiangqing-title {
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		font-weight: bold;
	}

	.num-position {
		position: absolute;
		width: 35px;
		height: 20px;
		background: rgba(0, 0, 0, 1);
		opacity: 0.5;
		border-radius: 20px;
		color: rgb(255, 255, 255);
		text-align: center;
		top: 680upx;
		right: 30upx;
	}

	.btn-group {
		position: fixed;
		bottom: 0;
		height: 49px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		font-size: 15px;
		color: rgb(255,255,255);
		background: rgb(255,255,255);
	}

	.btn1 {
		width: 100px;
		height: 36px;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 18px 5px 5px 18px;
		text-align: center;
		line-height: 36px;
	}
	.btn2{
		width: 100px;
		height: 36px;
		background: linear-gradient(-90deg,rgba(226, 196, 138, 1)  0%, rgba(196, 156, 90, 1) 100%);
		border-radius: 5px 18px 18px 5px;
		text-align: center;
		line-height: 36px;
		margin:0 20upx 0 10upx ;
	}
</style>
